/*
 * @Author: linxun 
 * @Date: 2021-03-06 14:50:04 
 * @Last Modified by: linxun
 * @Last Modified time: 2021-07-01 16:49:01
 * @Description: 数据集详情（弹窗和页面共用）
 */

import React, { useEffect, useState } from 'react';
import { Modal, Spin, Descriptions, Button, Input, Tooltip, message } from 'antd';
import { getText } from '../util';
import { TIMEFORMAT } from '@/utils/const';
import { EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
import moment from 'moment';
import styles from '../index.less';

const Detail = props => {
  const { detail, loading, hideVersion, labelTypes, labelScenes, listSourceType, canEdit, onEditSubmit } = props;
  const [isEdit, setIsEdit] = useState(false);
  const [value, setValue] = useState('');
  const [curValue, setCurValue] = useState('');

  useEffect(() => {
    setValue(detail.description);
    setCurValue(detail.description);
  }, [detail]);

  const onSubmit = () => {
    const hide = message.loading('正在保存...');
    onEditSubmit({ description: curValue }).then(() => {
      hide();
      setValue(curValue);
      setIsEdit(false);
    }).catch(err => {
      hide();
      console.log(err);
    });
  };

  const onEditCancel = () => {
    setIsEdit(false);
    setCurValue(value);
  };

  return (
    <Spin spinning={loading}>
      <Descriptions bordered>
        <Descriptions.Item label='数据集ID'>{detail.id}</Descriptions.Item>
        <Descriptions.Item label='数据集描述' span={2} >
          {isEdit
            ? (
              <div className={styles.editDescription}>
                <Input
                  placeholder='请输入数据集描述，不超过100个字符'
                  value={isEdit ? curValue : value}
                  onChange={e => setCurValue(e.target.value)}
                  maxLength={100}
                />
                <CheckOutlined
                  className={`${styles.editIcon} ${styles.optionIcon} ${styles.yesIcon}`}
                  onClick={onSubmit}
                />
                <CloseOutlined
                  className={`${styles.editIcon} ${styles.optionIcon} ${styles.cancelIcon}`}
                  onClick={onEditCancel}
                />
              </div>
            )
            : value || detail.description
          }
          {canEdit && !isEdit
            ? <Tooltip title='编辑数据集描述'><EditOutlined className={styles.editIcon} onClick={() => setIsEdit(true)} /></Tooltip>
            : null
          }
        </Descriptions.Item>
        <Descriptions.Item label='数据集名称'>{detail.name}</Descriptions.Item>
        <Descriptions.Item label='数据集权限'>{detail.ownerType !== 'group' ? '公有' : '私有'}</Descriptions.Item>
        {!hideVersion && <Descriptions.Item label='数据集版本'>{detail.version}</Descriptions.Item>}
        <Descriptions.Item label='数据来源'>{getText(listSourceType, detail.sourceType)}</Descriptions.Item>
        <Descriptions.Item label='标注场景'>{getText(labelScenes, detail.annotScene)}</Descriptions.Item>
        <Descriptions.Item label='图片数量'>{detail.itemCount}</Descriptions.Item>
        <Descriptions.Item label='标注类型'>{getText(labelTypes, detail.annotType)}</Descriptions.Item>
        <Descriptions.Item label='标注标签' span={2}>{detail.labelList?.join('，')}</Descriptions.Item>
        <Descriptions.Item label='数据集格式'>{detail.cvDatasetFormat}</Descriptions.Item>
        <Descriptions.Item label='数据集路径' span={2}>{detail.storagePath}</Descriptions.Item>
        <Descriptions.Item label='更新时间'>{moment(detail.updatedAt).format(TIMEFORMAT)}</Descriptions.Item>
      </Descriptions>
    </Spin>
  )
}

export default Detail;